This exercise will allow you to create a basic web page which will be required for the Investigate Your Community final project option.
For this exercise, you will create a page with your notes on R commands. You will then host it on your GitHub page.
You will write your code in chunks but not execute the data. Use {r eval=FALSE, include=TRUE} in the header so the page will render without running the actual code.
Outside of the codeblocks (the gray sections where we write code), we can style any text using standard markdown styling.
This is a nice guide to styling text with markdown: Markdown guide
We can create headings similar to html’s h1 to h6 with hashtags.
We can create links, like this: google
We can bold or italic text.
We can create bulleted lists.
We can also add special code inside of code blocks – the gray sections where we write code – that control how they render in our html document. These output options let us do things like:
The code below, for example, will output the text inside the print statement when rendered to html, but the actual code – the print() function – will be hidden.
In place of these instructions, you will copy over your notes from this semester about key R commands and processes that will leave you with a usable cheat sheet. So make a copy of this now and follow the steps.
First, create H1 headers for common tasks such as Data Viz, Building Tables, Cleaning Data, Joins
For example:
Notes on building a dual axis graphic with Parker:
income_vacancy %>%
ggplot(aes(x = community)) +
geom_point(aes(y=income_2020), color = "#64D197", stroke=5) +
geom_point(aes(y=vacant_2020*1000), stroke=5, color = "#FB8AE3") +
scale_y_continuous(
name = "2020 Income (Green)", limits=c(0, 62000), labels=scales::dollar_format(),
sec.axis = sec_axis(~./60000, name="2020 Percent Vacancies (Red)", labels = scales::percent))+
#scale_y_continuous(labels = scales::percent) +
labs(
title = "Income and Vacancies of Baltimore Neighborhoods 2020",
x = "Community",
caption = "source: BNIA Data - By: Parker Leipzig and Rob Wells"
)
First: Set up Github to host the files.
After uploading this html file to your repo, click on Settings on the top right.
Scroll down to the GitHub Pages section of Settings.
Change the Source from None to master branch and click save.
For future projects, you can organize your files so that all output HTML are stored
in a docs folder. Then the option master branch docs will host those files and ignore
everything in the root folder.
1) Take the URL from the html page:
http://github.com/username/reponame/file_name.html
2) Create a new URL.
Start with this prefix:
https://YOURUSERNAME.github.io/
And paste the repo directory and html file name to the end of that string
https://YOURUSERNAME.github.io/YOUR-REPO-FOLDER-NAME/YOUR-FILE-NAME.html
and you should have your hosted file!
Get rid of extraneous words such as “blob” and just use your file name, ie: Hosting_GitHub_Page.html
https://wellsdata.github.io/data_journalism_class/04_labs/lab_13/Hosting_GitHub_Page.html
In other words:
create a folder in your repo, call it images
find any .jpg or .png file and insert it into that folder.
In a QMD file, display the image as follows:
A more advanced technique controlling the width and height
From a Datawrapper Map
Video walkthrough